<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS距离相关的API</title>
  <style>
    .container {
      width: 600px;
      height: 600px;
      border: 1px solid #000;
      overflow: auto;
    }

    #box {
      width: 500px;
      height: 300px;
      /* 背景色包含了padding的范围 */
      background-color: lightblue;
      padding: 5px;
      border: 5px solid lightcoral;
      margin-top: 20px;
    }

    .overbox {
      width: 1000px;
      height: 1000px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="box"></div>
    <div class="overbox"></div>
  </div>
  <script>
    // 1.浏览器窗口的位置信息
    console.log('浏览器窗口距屏幕顶部的距离', window.screenTop);
    console.log('浏览器窗口距屏幕左边的距离', window.screenLeft);
    console.log('内部可视区的宽度', window.innerWidth);
    console.log('内部可视区的高度', window.innerHeight);
    console.log('窗口的宽度', window.outerWidth);
    console.log('窗口的高度', window.outerHeight);

    console.log('******************************************');

    // 2.屏幕的宽高
    console.log("屏幕的宽度", screen.width);
    console.log("屏幕的高度", screen.height);
    console.log("屏幕的可用宽度（除去任务栏）", screen.availWidth);
    console.log("屏幕的可用高度", screen.availHeight);

    console.log('******************************************');

    // 3.元素对象的位置信息
    const box = document.querySelector('#box')
    console.log("元素的可视区宽度（width+padding）", box.clientWidth);
    console.log("元素的可视区高度（height+padding）", box.clientHeight);

    console.log("元素的宽度（width+padding+border）", box.offsetWidth);
    console.log("元素的高度（height+padding+border）", box.offsetHeight);

    console.log("元素的左偏移量", box.offsetLeft);
    console.log("元素的上偏移量", box.offsetTop);
    console.log("元素的定位父元素", box.offsetParent);

    const container = document.querySelector(".container")
    console.log("元素的总宽度，包含了overflow的区域", container.scrollWidth);
    console.log("元素的总高度，包含了overflow的区域", container.scrollHeight);

    // container.addEventListener('scroll', () => {
    //   console.log("水平滚动的距离", container.scrollLeft);
    //   console.log("垂直滚动的距离", container.scrollTop);
    // })

    // 4.event对象中的坐标信息
    box.addEventListener("click", (e) => {
      console.log('距离页面左边的距离pageX', e.pageX);
      console.log('距离页面上部的距离pageY', e.pageY);


      console.log('距离浏览器左边的距离clientX', e.clientX);
      console.log('距离浏览器上部的距离clientY', e.clientY);


      console.log('相对于电脑屏幕左边的距离screenX', e.screenX);
      console.log('相对于电脑屏幕上边的距离screenY', e.screenY);

      console.log('相对于自生的坐标，距离自生左边', e.offsetX);
      console.log('相对于自生的坐标，距离自生上边', e.offsetY);

    }, false)



  </script>
</body>

</html>